<template>
	<!-- 评价中心--巡检端 -->
	<view class="flex-col page">
		<u-navbar
		            title="评价中心"
		            @rightClick="Back()"
		            :autoBack="true"
		        >
		</u-navbar>
		
		<scroll-view scroll-y="true" style="height:calc(100vh-44px);margin-top:44px" @scrolltolower="loadmore" v-if="list.length>0">
			<view class="flex-col list" >
				
				<view class="flex-col list-item" :key="i" v-for="(item, i) in list">
					<view class="justify-between">
						<view class="flex-col ">
							<view class="flex-row">
								<image :src="item.address" class="image_1" />
								<text class="text_1">{{item.consumerName}}</text>
							</view>
							<view class="flex-row group_3">
								<text class="text_3">评分</text>
								<view class="flex-col text-wrapper" v-if="item.ordersType == 5">
									<text class="text_5" v-if="item.commentsLevel == 1">非常满意</text>
									<text class="text_5" v-else-if="item.commentsLevel == 2">满意</text>
									<text class="text_5" v-else-if="item.commentsLevel == 3">一般</text>
									<text class="text_5" v-else>不满意</text>
								</view>
								<view class="flex-col text-wrapper" v-else-if="item.ordersType == 6">
									<text class="text_5" v-if="item.clevel == 1">非常满意</text>
									<text class="text_5" v-else-if="item.clevel == 2">满意</text>
									<text class="text_5" v-else-if="item.clevel == 3">一般</text>
									<text class="text_5" v-else>不满意</text>
								</view>
							</view>
						</view>
						<text class="text_7">{{item.commentsTime}}</text>
					</view>
					<text class="text_9">{{item.commentsDetails}}</text>
					<view v-if="item.ordersType == 5" style="margin-left: 72rpx;">
						<view class="flex-row equal-division " >
							<view class="" v-if="roleType==2">
								<view class="imagegrid" v-for="(demo,j) in item.commentsPicturesArr" :key="j">
									<image :src="demo" class="equal-division-item" @click="prviewImage(item.commentsPicturesArr,j)"/>
									
								</view>
							</view>
							<view class="" v-if="roleType==3">
								<view class="imagegrid" v-for="(demo,j) in item.cpicturesArr" :key="j">
									<image :src="demo" class="equal-division-item" @click="prviewImage(item.cpicturesArr,j)"/>
									
								</view>
							</view>
							
						</view>
						<view v-if="type =='3'">
							<text class="text_11">巡检工序：{{item.processName}}</text>
							<text class="text_13">巡检子项目：{{item.childProcessName}}</text>
							<text class="text_15">巡检时间：{{item.ctime}}</text>
						</view>
						<view class="flex-row section_2">
							<view class="flex-col items-start group_5" @click="goDetail(item)">
							
									<text class="text_17">施工巡检订单</text>
									<view class="group_6">
										<text
											class="text_19">{{item.provinceName}}{{item.cityName}}{{item.districtName}}</text>
										<text class="text_21">I</text>
										<text class="text_23">{{item.roomArea}}m²</text>
										<text class="text_25">I</text>
										<text class="text_27">{{item.roomTypeName}}</text>
									</view>
							
							</view>
							<view class="flex-col items-end image-wrapper"  @click.stop="goDetail(item)">
							
									<image :src="$IMG_URL+'16557868142922931567.png'" class="image_6" />
							
							</view>
						</view>
					</view>
					<!--  -->
					<view v-else-if="item.ordersType == 6" style="margin-left: 72rpx;">
						<view class="flex-row equal-division">
							<view v-for="(text,p) in item.cpicturesArr" :key="p">
								<image :src="text" class="equal-division-item" />
							</view>
						</view>
						<view class="flex-row section_2">
							<view class="flex-col items-start group_5" @click.stop="goDetail(item)">
							
									<text class="text_17">验收巡检订单</text>
									<view class="group_6">
										<text
											class="text_19">{{item.provinceName}}{{item.cityName}}{{item.districtName}}</text>
										<text class="text_21">I</text>
										<text class="text_23">{{item.roomArea}}m²</text>
										<text class="text_25">I</text>
										<text class="text_27">{{item.roomTypeName}}</text>
									</view>
							
							</view>
							<view class="flex-col items-end image-wrapper" @click.stop="goDetail(item)">
								
									<image :src="$IMG_URL+'16557868142922931567.png'" class="image_6" />
								
							</view>
						</view>
					</view>
			
			
				</view>
				<!-- <view @click="seemore">
					<uni-load-more color="#007AFF" :status="status" :content-text="contentText" />
				</view> -->
			</view>
		</scroll-view>
		
		
		<view v-else style="margin-top:44px">
			<u-empty style="height: 50vh;" mode="data" marginTop="90"
				icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<u-loadmore v-show="show" :status="status" />
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				list: [],
				type: '',
				status: 'loadmore',
			    show:false,
				status:'more',
				pageNum:1,
				roleType:0,
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLaunch() {
			
		},
		created() {
		
		    this.init();
		},
		methods: {
			goDetail(item)
			{
				if(this.roleType==2)
				{
					uni.navigateTo({
						url: '/pages/onSite/mine/buildPro/buildPro?ordersId='+item.ordersId,
						
					});	
				}else{
					uni.navigateTo({
						url: '/pages/onSite/mine/buildPro/buildPro?inspectionNumId='+item.inspectionFrequencyId,
						
					});	
				}
			   
			},
			init()
			{
				if (this.userInfo.roleType == '2' || uni.getStorageSync('userInfo').roleType == '2') {
					this.roleType=2;
					this.getlist();
				} else if (this.userInfo.roleType == '3' || uni.getStorageSync('userInfo').roleType == '3') {
				this.roleType=3;
					this.getXJlist();
				}
			},
			prviewImage(urls, index) {
				console.log(urls);
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			loadmore(){
				this.status="loading";
				this.show=true;
				this.pageNum++;
				if (this.userInfo.roleType == '2' || uni.getStorageSync('userInfo').roleType == '2') {
					this.$http('common.getGZassess',{
						pageSize:10,
						pageNum:this.pageNum
					}).then(res => {
						if (res.code == 200) {
							if(res.data!='' || String(res.data) != 'null'){
								this.list.push(...res.data);
								this.list.forEach(item=>{
									item.commentsPicturesArr=item.commentsPictures.split(',');
								});
								this.show=false;
							}else{
								this.status = 'nomore'
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					})
				} else if (this.userInfo.roleType == '3' || uni.getStorageSync('userInfo').roleType == '3') {
					this.$http('common.getXJassess',{
						pageSize:10,
						pageNum:this.pageNum
					}).then(res => {
						if (res.code == 200) {
							if(res.data!='' || String(res.data) != 'null'){
								this.list.push(...res.data)
								
							}else{
								this.status = 'contentnomore'
							}
							
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					})
				}
			},
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						console.log(beforePage)
						beforePage.$vm.$refs.mine.getinfo();
					}

				})
			},
			onPullDownRefresh() {
				console.log('onPullDownRefresh');
				this.init()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getlist() {
				// 工长评价列表
				this.$http('common.getGZassess',{
					pageSize:10,
					pageNum:this.pageNum
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.list = res.data
						this.list.forEach(item=>{
							item.commentsPicturesArr=item.commentsPictures.split(',');
						});
						console.log(this.list);
						if(this.list.length<10)
						{
							this.show=false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},
			getXJlist() {
				console.log(3333);
				// 巡检评价列表
				this.$http('common.getXJassess',{
					pageSize:10,
					pageNum:this.pageNum
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data;
						
						console.log(this.list);
						if(this.list.length<10)
						{
							this.show=false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 120rpx;
		align-items: center;
		width: 100vw;
		height: 120rpx;
		background-color: #ffffff;
		position: relative;
		z-index:1000;
	}
.imagegrid{
		    display: grid;
		    grid-template-columns: repeat(3,1fr);
		    gap: 10px;
	}
	.list-item:first-child
	{
		margin-top:12rpx !important;
	}
	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
		height: 120rpx;
	}

	.list-item {
		
		padding: 31rpx 24rpx ;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_9 {
		margin-left: 72rpx;
		margin-top: 24rpx;
	
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	
		text-align: left;
		
	}

	.equal-division {
		margin-top: 38rpx;
		align-self: flex-end;
	}

	.text_11 {
		margin-left: 72rpx;
		margin-top: 21rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_13 {
		margin-left: 72rpx;
		margin-top: 21rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_15 {
		margin-left: 72rpx;
		margin-top: 27rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.section_2 {
		margin-top: 26rpx;
		padding: 12rpx 24rpx 8rpx;
		align-self: flex-end;
		background-color: #1d6aff0f;
		border-radius: 16rpx;
		// width: 582rpx;
	}

	.group_1 {
		height: 8rpx;
	}

	.text_7 {
		margin-right: 3rpx;
		margin-top: 3rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.equal-division-item {
		// flex: 1 1 187rpx;
		border-radius: 16rpx;
		width: 187rpx;
		height: 187rpx;
	}

	.equal-division-item {
		width: 187rpx;
		height: 187rpx;
	}

	.equal-division-item_1 {
		margin-left: 10rpx;
		flex: 1 1 187rpx;
		border-radius: 16rpx;
		width: 187rpx;
		height: 187rpx;
	}

	.equal-division-item_2 {
		margin-left: 10rpx;
		flex: 1 1 187rpx;
		border-radius: 16rpx;
		width: 187rpx;
		height: 187rpx;
	}

	.group_5 {
		margin-top: 10rpx;
		flex: 1 1 auto;
	}

	.image-wrapper {
		margin-left: 35rpx;
		padding: 18rpx 0 66rpx;
		flex-shrink: 0;
		background-image: url($IMG_URL+'16557868142967722617.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 110rpx;
		height: 112rpx;
	}

	.group_3 {
		
		position: relative;
	}

	.text_17 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_6 {
		margin-top: 18rpx;
		line-height: 28rpx;
	}

	.image_6 {
		width: 28rpx;
		height: 28rpx;
	}

	.image_1 {
		width: 56rpx;
		height: 56rpx;
	}

	.text_1 {
		margin-left: 16rpx;
		margin-right: 53rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_3 {
		margin-left: 72rpx;
		margin-bottom: 9rpx;
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 35rpx;
	}

	.text-wrapper {
		margin-left: 12rpx;
		margin-top: 3rpx;
		padding-bottom: 8rpx;
		flex-shrink: 0;
		border-radius: 28rpx;
		border: 1px solid #1d6aff;
		height: 32rpx;
	}

	.text_19 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_21 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_23 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_25 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_27 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_5 {
		margin: 0 11rpx;
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.list {
		padding: 20rpx 24rpx;
		flex: 1 1 auto;
		overflow-y: auto;
		
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}
</style>
